<template>
  <div class="work">
      <div class="header">
        <el-form :model="queryParams" ref="queryForm"  v-show="showSearch" :inline="true"  label-width="68px">
            <el-form-item label="反馈时间" class="recordName">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM" type="monthrange" 
                range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
            </el-form-item>
            <el-form-item label="发生阶段" class="problemStage">
                <el-select v-model="queryParams.problemStage" placeholder="请选择问题发生阶段" clearable size="small">
                <el-option
                    v-for="dict in problemStageOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
                <span style="color:#00FFE3">默认查询当前年的数据</span>
            </el-form-item>
            <div style="float: right;">
                <el-switch
                    v-model="errorrate.switch"
                    active-color="#2E9AFE"
                    inactive-color="#A4A4A4">
                </el-switch>
            </div>
        </el-form>
        
      </div>
      <div  class="bold">
            <div class="middle">
                <AnalyzeLineCharts class="middleTwo" :chart-data="allLineChartRate"/>
                <AnalyzeDoubleBarCharts class="middleTwo" :chart-data="allBarChartRateByType"/>
            </div>
            <div class="footer">
                <AnalyzePieChartsQyCar class="middleTwo" :queryRatePieChartsByGroupsQy="openGroupsErrorrateDetail" :chart-data="allPieChartRateByGroupsQy"/>
                <AnalyzePieChartsZxCar class="middleTwo" :queryRatePieChartsByGroupsZx="openGroupsErrorrateDetail" :chart-data="allPieChartRateByGroupsZx"/>
                <AnalyzePieChartsZyCar class="middleTwo" :queryRatePieChartsByGroupsZy="openGroupsErrorrateDetail" :chart-data="allPieChartRateByGroupsZy"/>
            </div>
      </div>
      <el-dialog id="groupsErrorrateDetail" :destroy-on-close="true" :title="errorrate.title" :visible.sync="errorrate.open" width="80%" :close="resetGroupsErrorrateDetail" append-to-body>
            <div>
                <groupsErrorDetial :querygroupsErrorrateParam="querygroupsErrorrateParam" v-if="errorrate.open"/>
            </div>
      </el-dialog>
</div>      
</template>

<script>
import { queryAllRate,queryRateByType,queryRateByGroupsQy,queryRateByGroupsZx,queryRateByGroupsZy} from "@/api/statistics/errorrate/errorrate.js";
import { getToken } from '@/utils/auth';
import echarts from 'echarts';
import AnalyzeDoubleBarCharts from '../errorrate/barcharts/AnalyzeDoubleBarCharts';
import AnalyzePieChartsQyCar from '../errorrate/piecharts/AnalyzePieChartsQyCar';
import AnalyzePieChartsZxCar from '../errorrate/piecharts/AnalyzePieChartsZxCar';
import AnalyzePieChartsZyCar from '../errorrate/piecharts/AnalyzePieChartsZyCar';
import AnalyzeLineCharts from '../errorrate/linecharts/AnalyzeDoubleLineCharts';
import groupsErrorDetial from '../errorrate/detail/groups';
export default {
    name: "errorrate",
    components:{
        AnalyzeDoubleBarCharts,
        AnalyzeLineCharts,
        AnalyzePieChartsQyCar,
        AnalyzePieChartsZxCar,
        AnalyzePieChartsZyCar,
        groupsErrorDetial
    },
    data() {
        return {
            // 日期范围
            dateRange: [],
            // 显示搜索条件
            showSearch: true,
            allLineChartRate:{},
            allBarChartRateByType:{},
            allPieChartRateByGroupsQy:{},
            allPieChartRateByGroupsZx:{},
            allPieChartRateByGroupsZy:{},
            problemStageOptions: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                problemStage: null,
                // dateRange: [],
               // recordName: null,
            },
             //是否输出
            isSubmitFileOptions:[],
            //状态
            stateOptions: [],
            // 是否超时字典
            isTimeOutOptions: [],
            errorrate: {
                title:"",
                open:false,
            },
            querygroupsErrorrateParam:{}
        }
    },
    created() {
        this.getList();
        this.getDicts("qa_stage_type").then(response => {
            this.problemStageOptions = response.data;
        });
    },
    mounted () {
        let that = this
        this.queryAllRateLineCharts();
        this.queryRateBarChartsByType();
        this.queryRatePieChartsByGroupsQy();
        this.queryRatePieChartsByGroupsZx();
        this.queryRatePieChartsByGroupsZy();
    },
    activated(){
    
    },
    methods: {
        // 是否超时字典翻译
        isTimeOutFormat(row, column) {
            return this.selectDictLabel(this.isTimeOutOptions, row.isTimeOut);
        },
        // 是否提交输出物字典翻译
        isSubmitFileFormat(row, column) {
            return this.selectDictLabel(this.isSubmitFileOptions, row.isSubmitFile);
        },
        // 任务状态翻译
        stateFormat(row, column) {
            return this.selectDictLabel(this.stateOptions, row.state);
        },
        // getWorkList(){
        //      this.work.loading = true;
        //     listProcess(this.queryParams).then(response => {
        //         this.work.processList = response.rows;
        //         this.work.total = response.total;
        //         this.work.loading = false;
        //     });
        // },
        /** 查询所有图表 */
        getList() {
            this.loading = true;
            this.queryParams.groups = "";
            this.queryAllRateLineCharts(this.addDateRange(this.queryParams,this.dateRange));
            this.queryRateBarChartsByType(this.addDateRange(this.queryParams,this.dateRange));
            this.queryRatePieChartsByGroupsQy(this.addDateRange(this.queryParams,this.dateRange));
            this.queryRatePieChartsByGroupsZx(this.addDateRange(this.queryParams,this.dateRange));
            this.queryRatePieChartsByGroupsZy(this.addDateRange(this.queryParams,this.dateRange));
            this.loading = false;
            this.resetGroupsErrorrateDetail();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.queryParams.recordName = "";
            this.queryParams.problemStage = "";
            this.handleQuery();
            this.queryAllRateLineCharts();
            this.queryRateBarChartsByType();
            this.queryRatePieChartsByGroupsQy();
            this.queryRatePieChartsByGroupsZx();
            this.queryRatePieChartsByGroupsZy();  
        },
        // 查询的总差错率
        queryAllRateLineCharts(params){
            queryAllRate(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    jdata:[]
                }  
                newObject.jdata.push(response.average)
                response.dataList.forEach((item,index)=>{
                    newObject.xdata.push(item.month)
                    newObject.ydata.push(item.rate)
                })
                newObject.zdata.push("总差错率");
                this.allLineChartRate = newObject;  
            });
        },
        // 根据车型查询的差错率
        queryRateBarChartsByType(params){
            queryRateByType(params).then(response => {
               let newObject = {
                    tdata:[],
                    xdata:[],
                    odata:[],
                    pdata:[],
                    qdata:[],
                    oavgdata:[],
                    pavgdata:[],
                    qavgdata:[]
                }  
                response.data[1].dataList.forEach((item,index)=>{
                    newObject.xdata.push(item.month)
                    item.errorRateAnalysisVo.forEach((item1,index)=>{
                          newObject.odata.push(item1.qyRate)
                          newObject.pdata.push(item1.zxRate)
                          newObject.qdata.push(item1.zyRate) 
                    })
                })
                response.data[0].average.forEach((item2,index)=>{
                    if(item2.type == 0){
                    newObject.oavgdata.push(item2.average)
                    }else if (item2.type == 1){
                    newObject.pavgdata.push(item2.average)
                    }else if(item2.type == 2){
                    newObject.qavgdata.push(item2.average)
                    }
                })
                newObject.tdata.push("车型差错率");
                this.allBarChartRateByType = newObject;  
            });
        },

        // 根据组别查询的差错率
        //牵引车
        queryRatePieChartsByGroupsQy(params){
            
            queryRateByGroupsQy(params).then(response => {
               let newObject = {
                    groupsdata:[],
                    qydata:[],
                    qyname:[]
                }  
                response.data.forEach((item,index)=>{
                    var data = item.dataList;
                    for(var i = 0; i < data.length; i++){
                        newObject.qydata.push({"value": data[i].rate, "name":data[i].groups})
                    }
                    data.forEach((item1,index)=>{
                        newObject.groupsdata.push(item1.groups)
                    })
                })
                newObject.qyname.push("牵引车差错率");
                this.allPieChartRateByGroupsQy = newObject; 
              
                // this.openGroupsErrorrateDetail(params,"0");
            });
        },
        //自卸车
        queryRatePieChartsByGroupsZx(params){
            queryRateByGroupsZx(params).then(response => {
               let newObject = {
                    groupsdata:[],
                    zxdata:[],
                    zxname:[]
                }  
                response.data.forEach((item,index)=>{
                    var data = item.dataList;
                    for(var i = 0; i < data.length; i++){
                            newObject.zxdata.push({"value": data[i].rate, "name":data[i].groups})
                    }
                    data.forEach((item1,index)=>{
                        newObject.groupsdata.push(item1.groups)
                    })
                })
                newObject.zxname.push("自卸车差错率");
                this.allPieChartRateByGroupsZx = newObject;  
                //     this.openGroupsErrorrateDetail(params,"1");  
            });
        },
        
        //专用
        queryRatePieChartsByGroupsZy(params){
            queryRateByGroupsZy(params).then(response => {
                let newObject = {
                        groupsdata:[],
                        zydata:[],
                        zyname:[]
                    }  
                    response.data.forEach((item,index)=>{
                            var data = item.dataList;
                                for(var i = 0; i < data.length; i++){
                                    newObject.zydata.push({"value": data[i].rate, "name":data[i].groups})
                                }      
                                data.forEach((item1,index)=>{
                                    newObject.groupsdata.push(item1.groups)
                                })
                    })
                    newObject.zyname.push("专用车差错率");
                    this.allPieChartRateByGroupsZy = newObject;
                        // this.openGroupsErrorrateDetail(params,"2");  
                });
        },
            
        //组别详情弹窗
        openGroupsErrorrateDetail(params){
            this.querygroupsErrorrateParam = {};
            if(this.errorrate.switch == true&&params!=undefined&&undefined !=params.groups){
                this.errorrate.open = true;
                this.errorrate.title = "";
                this.querygroupsErrorrateParam = params;
                this.querygroupsErrorrateParam.beginTime= this.dateRange[0];
                this.querygroupsErrorrateParam.endTime = this.dateRange[1];
                this.querygroupsErrorrateParam.problemStage = this.queryParams.problemStage;
            }
        }, 
        resetGroupsErrorrateDetail(){
            this.errorrate.open = false;
            this.querygroupsErrorrateParam = {};
        }
    },
};
</script>
<style lang="scss">
.recordName .el-form-item__label{
    color:#fff;
    font-size: 12px;
} 
.problemStage .el-form-item__label{
    color:#fff;
    font-size: 12px;
}
.work{
    padding: 1em;
    background-color:#1d222a;
}
.header{
    margin-left: 15px;
}
.middle{
    display: flex;
    justify-content: space-between;
    
}
.middleTwo{
    background-image: url('./../../../assets/image/data1.png'); 
    background-size: 100% 100%;
    border-radius: 0%;
    margin-left:10px;
    margin-right:10px;
}

.footer{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.GroupincomedistributionPie{
    width: 100%;
    height: 82%;
}

.w-line{
    width: 99%;
    height: 1px;
    border-top: solid #3c5e8f 1px;
    margin-left: 10px;
    margin-right: 10px;
}
.h-line{
    width: 1px;
    height: 99%;
    border-right: solid #3c5e8f 1px;
    margin-left: 10px;
    margin-right: 10px;
}
#groupsErrorrateDetail .el-dialog__header{
    padding: 0px; 
    padding-bottom: 0px;
}
</style>